<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3.css">
    <title>首页</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .header {
            width: 1000px;
            height: 30px;

        }

        .search {
            width: 200px;
            height: 30px;
            border-radius: 18px;
            outline: none;
            background-color: white;

            border: 1px solid #ccc;
            padding-left: 20px;
            right: 400px;
            top: 10px;
            position: absolute;
        }

        .btn {
            height: 30px;
            width: 30px;
            position: absolute;
            background: url("../image/search.png") no-repeat;
            top: 16px;
            right: 405px;
            border: none;
            outline: none;
            cursor: pointer;
        }

        span {
            float: left;
        }

        .login {
            width: 200px;
            height: 30px;
            top: 16px;
            right: 100px;
            position: absolute;
        }

        iframe {
            background-size: cover;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }


    </style>

</head>
<body>
<div class="header">
    <span> <img src="../image/logo.png">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span style="font-size:30px ;">智&nbsp;&nbsp;慧&nbsp;&nbsp;云&nbsp;&nbsp;课&nbsp;&nbsp;堂</span>

</div>

<div class="header">
    <form action="" class="parent">
        <input type="text" class="search" placeholder="搜索">
        <input type="button" name="" id="" class="btn">
    </form>
</div>

<div class="login">
    <span><a href="../html/Set.html" target="_blank">设置&nbsp;</a></span>
    <span><a href="../login.html" target="_blank">登录&nbsp;</a></span>
    <span><a href="../html/SignUp.html" target="_blank">注册&nbsp;</a></span>
    <span><img src="../image/user.jpg" style="width: 30px;height: 30px;border-radius: 50%"></span>

</div>
<div class="w3-sidebar w3-bar-block w3-black w3-card" style="width:130px">
    <!-- <h5 class="w3-bar-item">菜单</h5> -->
    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Home')">首页</button>
    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Recommend')">推荐</button>
    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Classify')">分类</button>
    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Video')">课程视频</button>
    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Service')">课后服务</button>
    <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Recruitment')">讲师招募</button>
</div>

<div style="margin-left:130px">
    <div class="w3-padding">
        <span style="color:#333333"><a href="/login.html"><--返回</a></span>
    </div>

    <div id="Home" class="w3-container city w3-animate-opacity" style="display:none;">
        <iframe src="../html/home.html" width="1200" height="800" frameborder="0"></iframe>
    </div>

    <div id="Recommend" class="w3-container city w3-animate-left" style="display:none">
        <iframe src="../html/recommend.html" width="1200" height="800" frameborder="0"></iframe>
    </div>

    <div id="Classify" class="w3-container city w3-animate-top" style="display:none">
        <iframe src="../html/classify.html" width="1200" height="800" frameborder="0"></iframe>
    </div>

    <div id="Video" class="w3-container city w3-animate-right" style="display:none">
        <iframe src="../html/courseVideo.html" width="1200" height="800" frameborder="0"></iframe>
    </div>

    <div id="Service" class="w3-container city w3-animate-bottom" style="display:none">
        <iframe src="../html/complain.html" width="1000" height="800" frameborder="0"></iframe>
    </div>

    <div id="Recruitment" class="w3-container city w3-animate-zoom" style="display:none">
        <iframe src="../html/recruit.html" width="1000" height="800" frameborder="0"></iframe>
    </div>

</div>
</body>

<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    function openLink(evt, animName) {
        var i, x, tablinks;
        x = document.getElementsByClassName("city");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < x.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
        }
        document.getElementById(animName).style.display = "block";
        evt.currentTarget.className += " w3-red";
    }
</script>

</html>